<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title> Insha - Css3 Responsive Sidebar Menu</title>

    <link href="static/css/css2.css" rel="stylesheet">
    <link href='static/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="static/css/insha-style.css">

</head>

<body>

<div class="main" id="app">
    <div class="sidebar">
        <div class="logo_content">
            <div class="logo">
                <div class="logo_name">
                    <a href="#">
                        <i class='bx bxs-bank'></i>
                        银行业务管理系统
                    </a>
                </div>
            </div>
            <i class='bx bx-menu' id="toggle-menu-btn"></i>
        </div>
        <ul class="nav_list">
            <li>
                <a href="online.html">
                    <i class='bx bx-yen'></i>
                    <span class="links_name">网上银行</span>
                </a>
                <span class="tooltip">网上银行</span>
            </li>
            <li>
                <a href="#">
                    <i class='bx bxs-user-account'></i>
                    <span class="links_name">网上银行</span>
                </a>
                <span class="tooltip">网上银行</span>
            </li>
        </ul>
    </div>
    <div class="home_content">
        <div class="text">网上银行</div>
        <div class="rg_layout">
            <div class="rg_left">
                <p>设置登陆密码</p>
                <p>SET PASSWORD</p>

            </div>
            <div class="rg_center">
                <div class="rg_form">
                    <!--定义表单 form-->
                    <form action="#" method="">
                        <table id="tbe1">
                            <tr>
                                <td class="td_left"><label for="password1">手机号</label></td>
                                <td class="td_right"><input disabled="disabled" type="text" name="password1"
                                                            id="password1"
                                                            v-model="phone"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="password1">密码</label></td>
                                <td class="td_right"><input type="password" name="password1" id="password1"
                                                            placeholder="数字加字母大小写加字符不小于8位"
                                                            v-model="password1" @blur="pd()"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="password2">确认密码</label></td>
                                <td class="td_right"><input type="password" name="password2" id="password2"
                                                            placeholder="请再次输入密码" v-model="password2"
                                                            @blur="pd2()"></td>
                            </tr>


                            <tr>
                                <td colspan="2" align="center"><input type="button" id="btn_sub" value="设置密码"
                                                                      @click="cm()"></td>
                            </tr>
                        </table>

                    </form>


                </div>
            </div>
            <!-- <div class="rg_right">
                <p>使用身份证号+密码方式登录<a href="#">切换登录方式</a></p>
            </div> -->
        </div>
    </div>
</div>

<script src="static/js/scripts.js"></script>
<script src="static/js/vue.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/qs.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            phone: localStorage.getItem("phone"),
            password1: "",
            password2: ""

        },
        methods: {
            pd() {

                if (this.password1 != "") {
                    let rule = new RegExp("(^(?![A-Za-z0-9]+$)(?![a-z0-9\\W]+$)(?![A-Za-z\\W]+$)(?![A-Z0-9\\W]+$)[a-zA-Z0-9\\W]{8,20}$)");
                    if (rule.test(this.password1) == false) {
                        alert("您的密码格式不正确，请重新输入")
                        this.password1 = "";
                    }
                }

            },

            pd2() {
                if (this.password2 != "") {
                    if (this.password1 == this.password2) {
                    } else {
                        alert("您的两次密码输入不相同，请重新输入")
                        this.password1 = "";
                        this.password2 = "";
                    }
                }

            },
            cm() {
                if (this.password1 == "" || this.password2 == "") {
                    alert("密码不能为空，请输入密码")
                } else {
                    let param = {
                        phone: this.phone,
                        password: this.password2,
                        type: 0
                    };
                    // 此处得密码参数未确定
                    axios({
                        method: "post",
                        url: "http://localhost:8080/user/setPassword",
                        data: Qs.stringify(param),
                    }).then(res => {
                        if (res.data.code == 200) {
                            alert("密码设置成功")
                            this.password1 = "",
                                this.password2 = "",


                            console.log(res.data.data.data.bankNo)
                            localStorage.setItem("bankNo", res.data.data.data.bankNo)
                            location.href = "onlineindex.html"
                        }else{
                            alert(res.data.message)
                        }
                        // 待定
                    })
                }
            }


        }
    })
</script>
<style>
    #password1 {
        width: 220px;
    }

    #password2 {
        width: 220px;
    }
</style>

</body>

</html>
